<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view class="pure-amount" :class="_classes" :style="_styles">
		<!-- 货币符号 -->
		<view class="pure-amount__symbol" v-if="symbol">{{ symbol }}</view>

		<!-- 整数部分 -->
		<view class="pure-amount__amount pure-amount__int">{{ _int }}</view>

		<!-- 小数点 -->
		<view class="pure-amount__amount pure-amount__dot" v-if="_flot !== ''"
			>.</view
		>

		<!-- 小数部分 -->
		<view
			class="pure-amount__amount pure-amount__float"
			v-if="_flot !== ''"
			>{{ _flot }}</view
		>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed } from "vue";
import props from "./props";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits([]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];

	// 大小模式
	if (_props.mode) array.push(`pure-amount--mode--${_props.mode}`);

	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];

	// 颜色
	if (_props.color) array.push(`color: ${_props.color};`);

	// 字体大小
	if (_props.fontSize) array.push(`font-size: ${_props.fontSize};`);

	// 小号字体的大小
	if (_props.smallFontSize)
		array.push(`--pure-amount-small-font-size: ${_props.smallFontSize};`);

	// 字体加粗
	if (_props.bold) array.push(`font-weight: 700;`);

	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************
// 整数部分
const _int = computed(() => {
	const num = _props.amount?.toString?.()?.split?.(".")?.[0] || "0";

	// 增加千分位符号
	if (_props.thousands)
		return num?.replace?.(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") ?? "";

	// 不用增加千分位符号
	return num;
});

// 小数部分
const _flot = computed(() => {
	let num = _props.amount?.toString?.()?.split?.(".")?.[1] || "";

	// 小数点后的位数小于精度 && 需要补零到精度
	if (num.length < _props.precision && _props.padZero) {
		if (num === "") num = "0";
		num = num.padEnd(_props.precision, "0");
	}

	// 开启了舍弃末尾0的选项
	if (_props.dropZero) {
		if (num === "") return num;
		num = num.replace(/0+$/, "");
	}

	return num;
});

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
